<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 20px">
      <h5 style="margin-left: 30px">供应商编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入" v-model="departmentNumber"></el-input>
      <h5 style="margin-left: 30px">供应商名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入" v-model="departmentName" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex;">
      <el-table :data="tableData" style="width: 100%; margin-top: 20px" height="400">
        <el-table-column fixed prop="departmentNumber" label="供应商编号"></el-table-column>
        <el-table-column prop="departmentName" label="公司名称" width="300"></el-table-column>
        <el-table-column prop="businessScope" label="经营范围"></el-table-column>
        <el-table-column prop="contactPerson" label="联系人"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
        <el-table-column prop="contactEmail" label="邮箱"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="breachCount" label="爽约次数">
          <template slot-scope="scope">
            <span class="clickable" @click="handleNoshowCount(scope.row)">{{ scope.row.breachCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button type="success" @click="handleLook(scope.row)">企业信息</el-button>
            <el-button type="danger" @click="addNoshow(scope.row)">爽约</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 900px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
<!--    企业信息-->
    <el-dialog :visible.sync="dialogDepartmentVisible" width="40%">
      <!-- 企业信息部分 -->
      <h1 class="section-title" style="margin-top: -40px; ">企业信息</h1>
      <div class="info-item">
        <label>申请角色：</label>
        <el-input v-model="departmentData.companyRole" readonly></el-input>
      </div>
      <div class="info-item">
        <label>企业名称：</label>
        <el-input v-model="departmentData.departmentName" readonly></el-input>
      </div>
      <div class="info-item">
        <label>注册地址：</label>
        <el-input v-model="departmentData.registeredAddress" readonly></el-input>
      </div>
      <div class="info-item">
        <label>统一社会信用代码：</label>
        <el-input v-model="departmentData.creditCode" readonly></el-input>
      </div>
      <div class="info-item">
        <label>营业执照：</label>
        <div>
          <img :src="departmentData.businessLicense" alt="营业执照" width="200" height="250" />
        </div>
      </div>
      <!-- 经营范围 -->
      <h1 class="section-title">经营范围</h1>
      <div class="info-item">
        <label>所属行业：</label>
        <el-input v-model="departmentData.industry" readonly></el-input>
      </div>
      <div class="info-item">
        <label>经营范围：</label>
        <el-input v-model="departmentData.businessScope" readonly></el-input>
      </div>

      <!-- 法人信息 -->
      <h1 class="section-title">法人信息</h1>
      <div class="info-item">
        <label>法定代表人姓名：</label>
        <el-input v-model="departmentData.legalRepresentative" readonly></el-input>
      </div>
      <div class="info-item">
        <label>身份证号：</label>
        <el-input v-model="departmentData.legalIdNumber" readonly></el-input>
      </div>
      <!-- 联系人信息 -->
      <h1 class="section-title">联系人信息</h1>
      <div class="info-item">
        <label>姓名：</label>
        <el-input v-model="departmentData.contactPerson" readonly></el-input>
      </div>
      <div class="info-item">
        <label>移动电话：</label>
        <el-input v-model="departmentData.contactPhone" readonly></el-input>
      </div>
      <div class="info-item">
        <label>电子邮箱：</label>
        <el-input v-model="departmentData.contactEmail" readonly></el-input>
      </div>
    </el-dialog>
<!--    记录爽约-->
    <el-dialog :visible.sync="dialogNoshowVisible" width="40%" :custom-class="'slide-right-dialog'">
      <h1>记录爽约项目</h1>
      <el-form :model="noshowForm" :rules="rules" :ref="noshowForm" label-width="120px" class="demo-ruleForm custom-form" style="margin-top: 30px">
        <el-form-item label="添加爽约项目" prop="projectNumber" >
          <el-input v-model="noshowForm.projectName" placeholder="请完整填写项目名称"></el-input>
        </el-form-item>
        <el-form-item label="爽约原因" prop="noshowReason">
          <el-input type="textarea" v-model="noshowForm.noshowReason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitNoshow">确定</el-button>
          <el-input type="reset" style="width: 60px; margin-left: 10px;margin-right: 10px">重置</el-input>
          <el-button @click="dialogNoshowVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    爽约记录-->
    <el-dialog :visible.sync="dialogNoshowCountVisible" width="40%" :custom-class="'slide-right-dialog'">
      <h1 style="margin-top: -40px">爽约明细</h1><br>
      <span>{{noshowCountForm.departmentName}}</span><span> 共爽约{{noshowCountForm.breachCount}}次</span>
      <div style="display: flex;">
        <el-table style="margin-top: 30px" :data="noshowCountData" height="500">
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="projectNumber" label="项目编号"></el-table-column>
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="noshowReason" label="爽约原因"></el-table-column>
        </el-table>
      </div>
      <div style="padding: 10px 0;margin-left: 180px">
        <el-pagination
            @size-change="handleSizeChangen"
            @current-change="handleCurrentChangen"
            :current-page="pageNumn"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totaln">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addNoshow, getNoshowByDepartmentPage, getSupplerPage} from "@/api/department";
import index from "vuex";

export default {
  name: "SupplManag",
  computed: {
    index() {
      return index
    }
  },
  data() {
    return {
      tableData: [],
      noshowCountData: [],
      departmentNumber: '',
      departmentName: '',
      procurementMethod:'',
      projectNumber: "",
      projectName: "",
      pageNum: 1,
      total: 0,
      pageSize: 10,
      pageNumn: 1,
      totaln: 0,
      pageSizen: 10,
      dialogDepartmentVisible: false,
      dialogNoshowVisible: false,
      dialogNoshowCountVisible: false,
      departmentData: {},
      noshowForm: {},
      noshowCountForm: {},
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getSupplerPage(this.pageNum, this.pageSize,this.departmentName,this.departmentNumber).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      })
    },
    handleLook(row) { //企业信息
      this.departmentData = row
      this.dialogDepartmentVisible = true;
     },
    addNoshow(row) { // 爽约
      this.noshowForm.departmentName = row.departmentName
      this.dialogNoshowVisible = true
    },
    submitNoshow() { // 提交爽约
      console.log(this.noshowForm)
      addNoshow(this.noshowForm).then(res => {
        if (res){
          this.$message({
          type: 'success',
          message: '添加成功'
        })
        }
      })
      this.dialogNoshowVisible = false
    },
    async handleNoshowCount(row) { // 爽约记录
      console.log(row)
      this.noshowCountForm = {}
      this.noshowCountData = []
      this.noshowCountForm.departmentName = row.departmentName
      this.noshowCountForm.breachCount = row.breachCount
      await getNoshowByDepartmentPage(this.pageNumn, this.pageSizen, row.departmentName).then(res => {
        this.noshowCountData = res.records ? res.records : []
        this.totaln = res.total
      })
      this.dialogNoshowCountVisible = true
    },
    handleSizeChange(val) { // 改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) { // 改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    handleSizeChangen(val) { // 改变页码
      this.pageSizen = val;
      this.init();
    },
    handleCurrentChangen(val) { // 改变每页显示条数
      this.pageNumn = val;
      this.init();
    },
    //重置按钮
    reset() {
      this.departmentNumber = "";
      this.departmentName = "";
      this.init();
    }
  }
}
</script>

<style scoped>
>>> .slide-right-dialog {
  top: -115px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 800px;
  width: 400px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 20px; /* 调整对话框正文内容的字体大小 */
}
.enterprise-info {
  max-width: 800px;
  margin: 0 auto;
}
.section-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.info-item label {
  width: 150px;
}
.button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.upload-demo i {
  font-size: 20px;
}
</style>